<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-flex
					class="flex"
					direction="column"
					gap="20px"
				>
					<pure-amount amount="180"></pure-amount>
					<pure-amount amount="-180"></pure-amount>
				</pure-flex>
			</pj-demo>

			<!-- 货币符号 -->
			<pj-demo
				title="货币符号"
				desc="设置为空即不显示货币符号"
			>
				<pure-flex
					class="flex"
					direction="column"
					gap="20px"
				>
					<pure-amount
						amount="180"
						symbol="¥"
					></pure-amount>
					<pure-amount
						amount="180"
						symbol="£"
					></pure-amount>
					<pure-amount
						amount="180"
						symbol="$"
					></pure-amount>
				</pure-flex>
			</pj-demo>

			<!-- 千分位 -->
			<pj-demo
				title="千分位"
				desc="默认显示，可以禁用"
			>
				<pure-flex
					class="flex"
					direction="column"
					gap="20px"
				>
					<pure-amount amount="1800"></pure-amount>
					<pure-amount amount="16800800"></pure-amount>
				</pure-flex>
			</pj-demo>

			<!-- 小数点精度 -->
			<pj-demo title="小数点精度">
				<pure-flex
					class="flex"
					direction="column"
					gap="20px"
				>
					<pure-amount amount="18.686956"></pure-amount>
					<pure-amount
						amount="168.56868"
						:precision="3"
					></pure-amount>
					<pure-amount
						amount="18.686956"
						:precision="4"
					></pure-amount>
					<pure-amount
						amount="18.686956"
						:precision="5"
					></pure-amount>
				</pure-flex>
			</pj-demo>

			<!-- 舍弃小数位末尾的0 -->
			<pj-demo title="舍弃小数位末尾的0">
				<pure-flex
					class="flex"
					direction="column"
					gap="20px"
				>
					<pure-amount amount="18.6080"></pure-amount>
					<pure-gap inline></pure-gap>
					<pure-amount
						amount="18.6080"
						dropZero
					></pure-amount>
				</pure-flex>
			</pj-demo>

			<!-- 补零 -->
			<pj-demo title="补零">
				<pure-flex
					class="flex"
					direction="column"
					gap="20px"
				>
					<pure-amount
						amount="16.1"
						padZero
					></pure-amount>
					<pure-gap inline></pure-gap>
					<pure-amount
						amount="18"
						padZero
					></pure-amount>
				</pure-flex>
			</pj-demo>

			<!-- 数字大小一致 -->
			<pj-demo title="数字大小一致">
				<pure-flex
					class="flex"
					direction="column"
					gap="20px"
				>
					<pure-amount
						amount="18.6080"
						sameNumber
						symbol="¥"
					></pure-amount>
				</pure-flex>
			</pj-demo>

			<!-- 所有内容大小一致 -->
			<pj-demo title="所有内容大小一致">
				<pure-flex
					class="flex"
					direction="column"
					gap="20px"
				>
					<pure-amount
						amount="18.6080"
						sameAll
						symbol="¥"
					></pure-amount>
				</pure-flex>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup></script>

<style lang="scss" scoped>
	.flex {
		background: var(--pure-background-default);
		padding: 16px;
		border-radius: var(--pure-radius-default);
		color: var(--pure-theme-danger);
		font-weight: 700;
	}
</style>
